<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>生产管理</el-breadcrumb-item>
      <el-breadcrumb-item>生产工单</el-breadcrumb-item>
      <el-breadcrumb-item>新增工单</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 基础信息 -->
    <el-card class="mt-2">
      <h3>基础信息</h3>
      <el-form :model="baseInfo" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="工单编号">
              <el-input v-model="baseInfo.orderNumber" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户">
              <el-input v-model="baseInfo.customer" placeholder="客户名称/编码">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产订单号">
              <el-input v-model="baseInfo.productionOrder" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="销售单号">
              <el-input v-model="baseInfo.salesOrder" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="优先级">
              <el-select v-model="baseInfo.priority" placeholder="请选择">
                <el-option label="高" value="high"></el-option>
                <el-option label="中" value="medium"></el-option>
                <el-option label="低" value="low"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="baseInfo.notes" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 生产信息 -->
    <el-card class="mt-2">
      <h3>生产信息</h3>
      <el-form :model="productionInfo" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="选择产品">
              <el-input v-model="productionInfo.selectedProduct" placeholder="标准塑料桶01">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品编码">
              <el-input v-model="productionInfo.productCode" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品分类">
              <el-input v-model="productionInfo.category" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="制造方式">
              <el-input v-model="productionInfo.manufacturingMethod" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品类型">
              <el-input v-model="productionInfo.productType" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计量单位">
              <el-input v-model="productionInfo.unit" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="计划产量">
              <el-input v-model="productionInfo.plannedQuantity" placeholder="请输入数量"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产线">
              <el-select v-model="productionInfo.productionLine" placeholder="请选择">
                <el-option label="机械加工生产线A" value="线A"></el-option>
                <el-option label="机械加工生产线B" value="线B"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车间">
              <el-select v-model="productionInfo.workshop" placeholder="请选择">
                <el-option label="组装车间" value="组装"></el-option>
                <el-option label="包装车间" value="包装"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="计划开始日期">
              <el-date-picker v-model="productionInfo.startDate" placeholder="请选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划结束日期">
              <el-date-picker v-model="productionInfo.endDate" placeholder="请选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 操作按钮 -->
    <div class="bottom-buttons">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="saveOrder">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseInfo: {
        orderNumber: '',
        customer: '',
        productionOrder: '',
        salesOrder: '',
        priority: '',
        notes: ''
      },
      productionInfo: {
        selectedProduct: '标准塑料桶01',
        productCode: 'LJSL440901',
        category: '塑料制品',
        productType: '半成品',
        manufacturingMethod: '自制件',
        unit: '个',
        plannedQuantity: '',
        productionLine: '',
        workshop: '',
        startDate: '',
        endDate: ''
      }
    };
  },
  methods: {
    cancel() {
      console.log('取消');
    },
    saveOrder() {
      console.log('保存工单', this.baseInfo, this.productionInfo);
    }
  }
};
</script>

<style>
.mt-2 {
  margin-top: 20px;
}
.bottom-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>



<!--<template>-->
<!--  <div class="app-container">-->

<!--<div>-->




<!--  &lt;!&ndash; 添加或修改基础信息对话框 &ndash;&gt;-->
<!--  <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!--    <el-form-item label="工单编号" prop="worko">-->
<!--      <el-input v-model="form.worko" placeholder="请输入工单编号" />-->
<!--    </el-form-item>-->
<!--    <el-form-item label="客户" prop="customerName">-->
<!--      <el-input v-model="form.customerName" placeholder="请输入客户" />-->
<!--    </el-form-item>-->
<!--    <el-form-item label="生产订单号" prop="orderId">-->
<!--      <el-input v-model="form.orderId" placeholder="请输入生产订单号" />-->
<!--    </el-form-item>-->
<!--    <el-form-item label="销售单号" prop="orderSell">-->
<!--      <el-input v-model="form.orderSell" placeholder="请输入销售单号" />-->
<!--    </el-form-item>-->
<!--    <el-form-item label="优先级" prop="orderLevel">-->
<!--      <el-input v-model="form.orderLevel" placeholder="请输入优先级" />-->
<!--    </el-form-item>-->
<!--    <el-form-item label="备注" prop="remark">-->
<!--      <el-input v-model="form.remark" placeholder="请输入备注" />-->
<!--    </el-form-item>-->
<!--  </el-form>-->
<!--</div>-->


<!--    <el-row :gutter="20">-->
<!--      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
<!--      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>-->
<!--    </el-row>-->
<!--    <el-row :gutter="20">-->
<!--      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>-->
<!--      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>-->
<!--    </el-row>-->
<!--    <el-row :gutter="20">-->
<!--      <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>-->
<!--    </el-row>-->


<!--    &lt;!&ndash; 添加或修改生产信息对话框 &ndash;&gt;-->
<!--      <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!--        <el-form-item label="产品编号" prop="productCode">-->
<!--          <el-input v-model="form.productCode" placeholder="请输入产品编号" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="产品分类" prop="cate">-->
<!--          <el-input v-model="form.cate" placeholder="请输入产品分类" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="制造方式" prop="method">-->
<!--          <el-input v-model="form.method" placeholder="请输入制造方式" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="计量单位" prop="unit">-->
<!--          <el-input v-model="form.unit" placeholder="请输入计量单位" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="产品规格" prop="specification">-->
<!--          <el-input v-model="form.specification" placeholder="请输入产品规格" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="车间" prop="shopId">-->
<!--          <el-input v-model="form.shopId" placeholder="请输入车间" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="生产线" prop="productId">-->
<!--          <el-input v-model="form.productId" placeholder="请输入生产线" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="计划产量" prop="plannedProduction">-->
<!--          <el-input v-model="form.plannedProduction" placeholder="请输入计划产量" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="计划开始日期" prop="startdate">-->
<!--          <el-date-picker clearable-->
<!--                          v-model="form.startdate"-->
<!--                          type="date"-->
<!--                          value-format="yyyy-MM-dd"-->
<!--                          placeholder="请选择计划开始日期">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="计划结束日期" prop="denddate">-->
<!--          <el-date-picker clearable-->
<!--                          v-model="form.denddate"-->
<!--                          type="date"-->
<!--                          value-format="yyyy-MM-dd"-->
<!--                          placeholder="请选择计划结束日期">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="工艺路线" prop="craftId">-->
<!--          <el-input v-model="form.craftId" placeholder="请输入工艺路线" />-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!--        <el-button @click="cancel">取 消</el-button>-->
<!--      </div>-->




<!--  </div>-->














<!--</template>-->

<!--<script>-->
<!--import { listBasic, getBasic, delBasic, addBasic, updateBasic } from "@/api/sheet/basic";-->

<!--export default {-->
<!--  name: "Basic",-->
<!--  data() {-->
<!--    return {-->
<!--      // 遮罩层-->
<!--      loading: true,-->
<!--      // 选中数组-->
<!--      ids: [],-->
<!--      // 非单个禁用-->
<!--      single: true,-->
<!--      // 非多个禁用-->
<!--      multiple: true,-->
<!--      // 显示搜索条件-->
<!--      showSearch: true,-->
<!--      // 总条数-->
<!--      total: 0,-->
<!--      // 基础信息表格数据-->
<!--      basicList: [],-->
<!--      // 弹出层标题-->
<!--      title: "",-->
<!--      // 是否显示弹出层-->
<!--      open: false,-->
<!--      // 查询参数-->
<!--      queryParams: {-->
<!--        pageNum: 1,-->
<!--        pageSize: 10,-->
<!--        worko: null,-->
<!--        customerName: null,-->
<!--        orderId: null,-->
<!--        orderSell: null,-->
<!--        orderLevel: null,-->
<!--      },-->
<!--      // 表单参数-->
<!--      form: {},-->
<!--      // 表单校验-->
<!--      rules: {-->
<!--        worko: [-->
<!--          { required: true, message: "工单编号不能为空", trigger: "blur" }-->
<!--        ],-->
<!--      }-->
<!--    };-->
<!--  },-->
<!--  created() {-->
<!--    this.getList();-->
<!--  },-->
<!--  methods: {-->
<!--    /** 查询基础信息列表 */-->
<!--    getList() {-->
<!--      this.loading = true;-->
<!--      listBasic(this.queryParams).then(response => {-->
<!--        this.basicList = response.rows;-->
<!--        this.total = response.total;-->
<!--        this.loading = false;-->
<!--      });-->
<!--    },-->
<!--    // 取消按钮-->
<!--    cancel() {-->
<!--      this.open = false;-->
<!--      this.reset();-->
<!--    },-->
<!--    // 表单重置-->
<!--    reset() {-->
<!--      this.form = {-->
<!--        worko: null,-->
<!--        customerName: null,-->
<!--        orderId: null,-->
<!--        orderSell: null,-->
<!--        orderLevel: null,-->
<!--        remark: null-->
<!--      };-->
<!--      this.resetForm("form");-->
<!--    },-->
<!--    /** 搜索按钮操作 */-->
<!--    handleQuery() {-->
<!--      this.queryParams.pageNum = 1;-->
<!--      this.getList();-->
<!--    },-->
<!--    /** 重置按钮操作 */-->
<!--    resetQuery() {-->
<!--      this.resetForm("queryForm");-->
<!--      this.handleQuery();-->
<!--    },-->
<!--    // 多选框选中数据-->
<!--    handleSelectionChange(selection) {-->
<!--      this.ids = selection.map(item => item.worko)-->
<!--      this.single = selection.length!==1-->
<!--      this.multiple = !selection.length-->
<!--    },-->
<!--    /** 新增按钮操作 */-->
<!--    handleAdd() {-->
<!--      this.reset();-->
<!--      this.open = true;-->
<!--      this.title = "添加基础信息";-->
<!--    },-->
<!--    /** 修改按钮操作 */-->
<!--    handleUpdate(row) {-->
<!--      this.reset();-->
<!--      const worko = row.worko || this.ids-->
<!--      getBasic(worko).then(response => {-->
<!--        this.form = response.data;-->
<!--        this.open = true;-->
<!--        this.title = "修改基础信息";-->
<!--      });-->
<!--    },-->
<!--    /** 提交按钮 */-->
<!--    submitForm() {-->
<!--      this.$refs["form"].validate(valid => {-->
<!--        if (valid) {-->
<!--          if (this.form.worko != null) {-->
<!--            updateBasic(this.form).then(response => {-->
<!--              this.$modal.msgSuccess("修改成功");-->
<!--              this.open = false;-->
<!--              this.getList();-->
<!--            });-->
<!--          } else {-->
<!--            addBasic(this.form).then(response => {-->
<!--              this.$modal.msgSuccess("新增成功");-->
<!--              this.open = false;-->
<!--              this.getList();-->
<!--            });-->
<!--          }-->
<!--        }-->
<!--      });-->
<!--    },-->
<!--    /** 删除按钮操作 */-->
<!--    handleDelete(row) {-->
<!--      const workos = row.worko || this.ids;-->
<!--      this.$modal.confirm('是否确认删除基础信息编号为"' + workos + '"的数据项？').then(function() {-->
<!--        return delBasic(workos);-->
<!--      }).then(() => {-->
<!--        this.getList();-->
<!--        this.$modal.msgSuccess("删除成功");-->
<!--      }).catch(() => {});-->
<!--    },-->
<!--    /** 导出按钮操作 */-->
<!--    handleExport() {-->
<!--      this.download('sheet/basic/export', {-->
<!--        ...this.queryParams-->
<!--      }, `basic_${new Date().getTime()}.xlsx`)-->
<!--    }-->
<!--  }-->
<!--};-->




<!--</script>-->

<!--<script>-->
<!--import { listDamage, getDamage, delDamage, addDamage, updateDamage } from "@/api/sheet/damage";-->

<!--export default {-->
<!--  name: "Damage",-->
<!--  data() {-->
<!--    return {-->
<!--      // 遮罩层-->
<!--      loading: true,-->
<!--      // 选中数组-->
<!--      ids: [],-->
<!--      // 非单个禁用-->
<!--      single: true,-->
<!--      // 非多个禁用-->
<!--      multiple: true,-->
<!--      // 显示搜索条件-->
<!--      showSearch: true,-->
<!--      // 总条数-->
<!--      total: 0,-->
<!--      // 生产信息表格数据-->
<!--      damageList: [],-->
<!--      // 弹出层标题-->
<!--      title: "",-->
<!--      // 是否显示弹出层-->
<!--      open: false,-->
<!--      // 查询参数-->
<!--      queryParams: {-->
<!--        pageNum: 1,-->
<!--        pageSize: 10,-->
<!--        productCode: null,-->
<!--        materialtype: null,-->
<!--        cate: null,-->
<!--        method: null,-->
<!--        unit: null,-->
<!--        specification: null,-->
<!--        shopId: null,-->
<!--        productId: null,-->
<!--        plannedProduction: null,-->
<!--        startdate: null,-->
<!--        denddate: null,-->
<!--        craftId: null-->
<!--      },-->
<!--      // 表单参数-->
<!--      form: {},-->
<!--      // 表单校验-->
<!--      rules: {-->
<!--      }-->
<!--    };-->
<!--  },-->
<!--  created() {-->
<!--    this.getList();-->
<!--  },-->
<!--  methods: {-->
<!--    /** 查询生产信息列表 */-->
<!--    getList() {-->
<!--      this.loading = true;-->
<!--      listDamage(this.queryParams).then(response => {-->
<!--        this.damageList = response.rows;-->
<!--        this.total = response.total;-->
<!--        this.loading = false;-->
<!--      });-->
<!--    },-->
<!--    // 取消按钮-->
<!--    cancel() {-->
<!--      this.open = false;-->
<!--      this.reset();-->
<!--    },-->
<!--    // 表单重置-->
<!--    reset() {-->
<!--      this.form = {-->
<!--        optionId: null,-->
<!--        productCode: null,-->
<!--        materialtype: null,-->
<!--        cate: null,-->
<!--        method: null,-->
<!--        unit: null,-->
<!--        specification: null,-->
<!--        shopId: null,-->
<!--        productId: null,-->
<!--        plannedProduction: null,-->
<!--        startdate: null,-->
<!--        denddate: null,-->
<!--        craftId: null-->
<!--      };-->
<!--      this.resetForm("form");-->
<!--    },-->
<!--    /** 搜索按钮操作 */-->
<!--    handleQuery() {-->
<!--      this.queryParams.pageNum = 1;-->
<!--      this.getList();-->
<!--    },-->
<!--    /** 重置按钮操作 */-->
<!--    resetQuery() {-->
<!--      this.resetForm("queryForm");-->
<!--      this.handleQuery();-->
<!--    },-->
<!--    // 多选框选中数据-->
<!--    handleSelectionChange(selection) {-->
<!--      this.ids = selection.map(item => item.optionId)-->
<!--      this.single = selection.length!==1-->
<!--      this.multiple = !selection.length-->
<!--    },-->
<!--    /** 新增按钮操作 */-->
<!--    handleAdd() {-->
<!--      this.reset();-->
<!--      this.open = true;-->
<!--      this.title = "添加生产信息";-->
<!--    },-->
<!--    /** 修改按钮操作 */-->
<!--    handleUpdate(row) {-->
<!--      this.reset();-->
<!--      const optionId = row.optionId || this.ids-->
<!--      getDamage(optionId).then(response => {-->
<!--        this.form = response.data;-->
<!--        this.open = true;-->
<!--        this.title = "修改生产信息";-->
<!--      });-->
<!--    },-->
<!--    /** 提交按钮 */-->
<!--    submitForm() {-->
<!--      this.$refs["form"].validate(valid => {-->
<!--        if (valid) {-->
<!--          if (this.form.optionId != null) {-->
<!--            updateDamage(this.form).then(response => {-->
<!--              this.$modal.msgSuccess("修改成功");-->
<!--              this.open = false;-->
<!--              this.getList();-->
<!--            });-->
<!--          } else {-->
<!--            addDamage(this.form).then(response => {-->
<!--              this.$modal.msgSuccess("新增成功");-->
<!--              this.open = false;-->
<!--              this.getList();-->
<!--            });-->
<!--          }-->
<!--        }-->
<!--      });-->
<!--    },-->
<!--    /** 删除按钮操作 */-->
<!--    handleDelete(row) {-->
<!--      const optionIds = row.optionId || this.ids;-->
<!--      this.$modal.confirm('是否确认删除生产信息编号为"' + optionIds + '"的数据项？').then(function() {-->
<!--        return delDamage(optionIds);-->
<!--      }).then(() => {-->
<!--        this.getList();-->
<!--        this.$modal.msgSuccess("删除成功");-->
<!--      }).catch(() => {});-->
<!--    },-->
<!--    /** 导出按钮操作 */-->
<!--    handleExport() {-->
<!--      this.download('sheet/damage/export', {-->
<!--        ...this.queryParams-->
<!--      }, `damage_${new Date().getTime()}.xlsx`)-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->





<!--<style>-->
<!--.el-row {-->
<!--  margin-bottom: 20px;-->
<!--  &:last-child {-->
<!--    margin-bottom: 0;-->
<!--  }-->
<!--}-->
<!--.el-col {-->
<!--  border-radius: 4px;-->
<!--}-->
<!--.bg-purple-dark {-->
<!--  background: #99a9bf;-->
<!--}-->
<!--.bg-purple {-->
<!--  background: #d3dce6;-->
<!--}-->
<!--.bg-purple-light {-->
<!--  background: #e5e9f2;-->
<!--}-->
<!--.grid-content {-->
<!--  border-radius: 4px;-->
<!--  min-height: 36px;-->
<!--}-->
<!--.row-bg {-->
<!--  padding: 10px 0;-->
<!--  background-color: #f9fafc;-->
<!--}-->
<!--</style>-->
